<template>
  <div class='check-module-container'>
    <el-form :model="requestParam"
             label-width="100px">
      <el-row class="request-header dm-form">
        <el-col :lg="{span:3}"
                :md="{span:3}"
                :sm="{span:5}"
                :xs="{span:24}">
          <el-button @click="editTemplate('create',{})"
                     type="primary">添加检查模板</el-button>
        </el-col>

        <el-col :lg="{span:12,offset:4}"
                :md="{span:12,offset:3}"
                :sm="{span:10,offset:1}"
                :xs="{span:24}"
                class="align-right">
          <el-form-item prop="tpl_name"
                        label="检查模板名称">
            <el-input v-model="requestParam.tpl_name"
                      placeholder="请输入检查模板名称"></el-input>
          </el-form-item>

        </el-col>
        <el-col :lg="{span:4,offset:1}"
                :md="{span:6}"
                :sm="{span:8}"
                :xs="{span:24}"
                class="flex-end">
          <el-button @click="search"
                     type="primary">搜索</el-button>
          <el-button @click="reset">重置</el-button>
        </el-col>
      </el-row>
    </el-form>
    <el-table :data="checkTemplateList.list"
              height="600"
              :header-cell-style="{background:'#f5f5f5'}">
      <el-table-column type="index"
                       label="序号">
      </el-table-column>
      <el-table-column prop="tpl_name"
                       label="检查模板名称">
      </el-table-column>
      <el-table-column prop="operate_name"
                       label="操作人员">
      </el-table-column>
      <el-table-column prop="operate_time"
                       label="操作时间">
      </el-table-column>

      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button type="text"
                     @click="publishApp(scope.row)">发布</el-button>
          <el-button type="text"
                     @click="configCheckTemplate(scope.row)">配置</el-button>
          <el-button @click="editTemplate('update',scope.row)"
                     type="text">修改</el-button>
          <el-button @click="deleteTemplate(scope.row)"
                     type="text">删除</el-button>
        </template>

      </el-table-column>
    </el-table>
    <el-pagination @current-change="handlePageChange"
                   @size-change="handleSizeChange"
                   :current-page="requestParam.page"
                   :page-size="requestParam.page_size"
                   layout="total,sizes,prev, pager, next, jumper"
                   background
                   :total="checkTemplateList.total_count"
                   align="center">
    </el-pagination>
    <EditCheckTpleDialog :dialogVisible.sync="editTemplateDialogVisible"
                         :dialogStatus="editTemplateDialogStatus"
                         :dialogForm="editTemplateDialogForm"
                         @callback="editTemplateCb"></EditCheckTpleDialog>
    <PublishAppDialog :dialogVisible.sync="publishAppDialogVisible"
                      :dialogForm="publishAppDialogForm"
                      @callback="publishAppCb"></PublishAppDialog>
  </div>
</template>
<script>
import EditCheckTpleDialog from './components/EditCheckTplDialog'
import PublishAppDialog from './components/PublishAppDialog'
import { CommonCheckApi } from '@/services/SystemSetting'
export default {
  data () {
    return {
      // 请求检查模板列表参数
      requestParam: {
        tpl_name: '',
        is_page: 1,
        page: 1,
        page_size: 10
      },
      resetParam: {
        tpl_name: '',
        is_page: 1,
        page: 1,
        page_size: 10
      },
      // 检查模板列表
      checkTemplateList: {
        list: [],
        page: 1,
        total_count: 10
      },
      // 编辑检查模板弹框是否可见
      editTemplateDialogVisible: false,
      // 编辑检查模板弹框状态
      editTemplateDialogStatus: 'create',
      // 编辑检查模板弹框数据对象
      editTemplateDialogForm: {

      },
      // 发布app弹框是否可见
      publishAppDialogVisible: false,
      // 发布app弹框数据对象
      publishAppDialogForm: {}
    }
  },
  components: {
    EditCheckTpleDialog,
    PublishAppDialog
  },
  methods: {
    handleSizeChange (size) {
      this.requestParam.page_size = size
      this.requestParam.page = 1
      this.getcheckTemplateList()
    },
    handlePageChange (page) {
      this.requestParam.page = page
      this.getcheckTemplateList()
    },
    search () {
      this.requestParam.page = 1
      this.getcheckTemplateList()
    },
    reset () {
      let reset = JSON.parse(JSON.stringify(this.resetParam))
      this.requestParam = Object.assign(this.requestParam, reset)
      this.getcheckTemplateList()
    },
    // 获取检查模板列表
    getcheckTemplateList () {
      CommonCheckApi.getCheckTplList({
        params: this.requestParam
      }).then(res => {
        if (res.code === 0) {
          this.checkTemplateList = res.data
        }
      })
    },
    // 编辑检查模板
    editTemplate (type, data) {
      this.editTemplateDialogStatus = type
      this.editTemplateDialogForm = data
      this.editTemplateDialogVisible = true
    },
    // 编辑检查模板回调
    editTemplateCb () {
      this.getcheckTemplateList()
    },
    // 删除检查模板确认
    deleteTemplate (item) {
      this.$confirm('此操作将永久删除, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          this.deleteTemplateApi(item.check_tpl_id)
        })
        .catch(() => {

        })
    },
    // 删除检查模板api
    deleteTemplateApi (id) {
      CommonCheckApi.deleteCheckTpl({
        data: {
          check_tpl_id: id
        }
      }).then(res => {
        if (res.code === 0) {
          this.$message.success('删除检查模板成功')
          this.getcheckTemplateList()
        }
      })
    },
    // 模板配置
    configCheckTemplate (row) {
      this.$router.push({
        path: '/configCheckTpl',
        query: {
          id: row.check_tpl_id,
          name: row.tpl_name
        }
      })
    },
    // 发布app
    publishApp (data) {
      this.publishAppDialogForm = data
      this.publishAppDialogVisible = true
    },
    // 发布app弹框回调
    publishAppCb (data) {

    }
  },
  created () {
    this.getcheckTemplateList()
  },
  mounted () {
  }
}
</script>
<style scoped lang='scss'>
.check-module-container {
  padding: 20px;

  .el-pagination {
    margin-top: 20px;
  }
}
</style>